<template>
  <!-- 头部标题栏 -->
  <div class="article">
    <mt-header fixed title="速回收以旧换新" class="head">
      <router-link to="/index/recommend" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- 轮播图 -->
    <mt-swipe
      class="mtswipe"
      :style="{ height: swipeHeight }"
      :auto="3000"
      :speed="500"
      style="margin: 0px 8px"
    >
      <mt-swipe-item>
        <img src="/img/index/20190617165236_86188.jpg" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/img/index/20190617165236_86188.jpg" alt="" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- 导航栏 -->
    <mt-navbar v-model="navactive" class="nav">
      <mt-tab-item id="0">热门手机</mt-tab-item>
      <mt-tab-item id="10011001">iphone专区</mt-tab-item>
      <mt-tab-item id="10011002">华为专区</mt-tab-item>
      <mt-tab-item id="10011004">OPPO专区</mt-tab-item>
      <mt-tab-item id="1">更多&gt;</mt-tab-item>
    </mt-navbar>
    <!-- 手机面板内容 -->
    <mt-tab-container v-model="navactive" style="margin: 84px 0px 30px 0px">
      <mt-tab-container-item
        id="0"
        infinite-scroll-distance="20"
        v-infinite-scroll="loadmore"
        infinite-scroll-disabled="busy"
      >
        <!-- `/prodetail/${this.protitle}/${this.proprice}` -->
        <div
          class="commodity"
          v-for="(item, i) of arr"
          :key="i"
          @click="getProDetails(item.name, item.prise)"
        >
          <div class="picture" style="width: 120px; height: 145px">
            <img
              style="width: 100%"
              :src="`http://127.0.0.1:3000/${item.photo_url}`"
            />
          </div>
          <div class="details" style="position: relative">
            <div class="discounts">
              <span style="font-size: 13px">换新立减</span>
              <span style="font-size: 16px">￥250</span>
            </div>
            <div class="gather">
              <div class="title" style="">
                {{ item.name }}
              </div>
              <div style="margin-top: 3px; color: #999999">
                官网价¥{{ item.prise }}
              </div>
              <div class="promptly">
                <router-link style="" to="#">立即换新</router-link>
              </div>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import List from "./List.vue";
export default {
  components: { List },
  data() {
    return {
      selected: "upgrade",
      swipeHeight: "0px",
      navactive: "0",
      arr: [],
      busy: false,
      pno: 1,
    };
  },
  methods: {
    // 跳转到详情页
    getProDetails(protitle, proprice) {
      this.$router.push(`/prodetail/${protitle}/${proprice}`);
    },
    initSwipeHeight() {
      // 通过公式  计算轮播图应该设置的高度
      let picwidth = 766;
      let picheight = 266;
      let screenwidth = window.screen.width;
      let height = Math.floor((picheight * screenwidth) / picwidth) + "px";
      this.swipeHeight = height;
    },
    // 无限滚动触底后，执行loadmore
    loadmore() {
      this.busy = true;
      this.pno++;
      // 发送请求，接收到响应商品列表后，追加到当前商品数组末尾
      this.loadCommodity(this.pno, (res) => {
        this.arr = this.arr.concat(res);
        this.busy = false;
      });
    },
    // 加载商品列表
    loadCommodity(pno, callback) {
      this.$indicator.open("请稍等...");
      this.axios.get(`/products/index?pno=${pno}`).then((res) => {
        callback(res.data.data);
        this.$indicator.close();
      });
    },
  },
  mounted() {
    this.initSwipeHeight();
    this.loadCommodity(1, (res) => {
      this.arr = res;
    });
  },
  watch: {
    //监控navactive跳转页面并将参数lid传去
    navactive() {
      this.$router.push(`/renewindex/renewlist/lid=${this.navactive}`);
    },
  },
};
</script>
<style>
/* 头部标题栏 */
.article .head {
  color: #000;
  font-size: 18px;
  background-color: #fff;
}
/* 轮播图 */
.article .mtswipe {
  position: relative;
  top: 62px;
}
.article .mtswipe img {
  width: 100%;
}
/* 导航栏 */
.article .mint-navbar {
  top: 75px;
  position: relative;
}
.article .mint-navbar .mint-tab-item.is-selected {
  color: #000;
  border-bottom: 2px solid red;
}
/* 面板 */
.article .title {
  width: 228px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.article .commodity {
  width: 350px;
  display: flex;
  height: 150px;
  margin: 8px auto;
  padding: 18px 0px;
  border-radius: 14px;
  box-sizing: border-box;
  background-color: #fff;
}
.article .promptly {
  margin-top: 15px;
  text-align: center;
  border-radius: 25px;
  width: 80px;
  height: 25px;
  border: 1px solid red;
}
.article .promptly a {
  color: red;
  font-size: 0.59733rem;
  line-height: 25px;
  text-decoration: none;
}
.article .discounts {
  color: #fff;
  position: absolute;
  top: -17px;
  right: 0;
  text-align: center;
  width: 65px;
  height: 41px;
  background-color: #f74444;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.article .gather {
  margin-top: 28px;
}

.article .nav a {
  font-size: 12px;
  color: #000;
  text-decoration: none;
}
.mint-navbar .mint-tab-item-label {
  font-size: 14px;
}
</style>
